<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('msg')" label="短信接口" name="interface-message">
        <interface-form :type="1" v-show="activeTab == 'interface-message'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('card')" label="银行卡接口" name="interface-bank">
        <interface-form :type="2" v-show="activeTab == 'interface-bank'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('inter-msg')" label="国际短信接口" name="interface-inter-message">
        <interface-form :type="5" v-show="activeTab == 'interface-inter-message'"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="电子邮箱信息发送接口" name="interface-email">
        <interface-form :type="3"  v-show="activeTab == 'interface-email'" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
  import InterfaceForm from "@/views/system/interfaceForm";

  export default {
    name: "sys-interface",
    components: {InterfaceForm},
    data() {
      return {
        activeTab: 'interface-message',
      };
    },
    mounted() {
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '短信接口', true)});
    },
    methods: {
      saveCommand(paramName) {
        this.doSave({action: `save${paramName}`});
      },

      toggleInterface(row) {
      },
      changeTab(tabs) {
        this.activeTab = tabs.name
        this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, tabs.label, true)});

      }
    }
  }
</script>

<style scoped>
  .switch {
    margin-top: 8px;
  }
</style>
